<template>
  <div class="tabbar-container">
    <van-tabbar v-model="active" placeholder route>
      <van-tabbar-item replace to="/">
        <span class="tab-text">{{ t("home") }}</span>
        <template #icon>
          <div class="i-carbon:home tab-icon" />
        </template>
      </van-tabbar-item>

      <!-- <van-tabbar-item replace to="/about">
        <span class="tab-text">{{ t("about") }}</span>
        <template #icon>
          <div class="i-carbon:information tab-icon" />
        </template>
      </van-tabbar-item> -->

      <van-tabbar-item replace to="/products">
        <span class="tab-text">{{ t("products") }}</span>
        <template #icon>
          <div class="i-carbon:cube tab-icon" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item replace to="/profile">
        <span class="tab-text">{{ t("userbank_account") }}</span>
        <template #icon>
          <div class="i-carbon:user tab-icon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
const { t } = useI18n();
const active = ref(0);
const route = useRoute();

// 调试输出
console.log("TabBar - 当前路由名称:", route.name, "类型:", typeof route.name);

// 设置初始激活标签
onMounted(() => {
  setActiveTab(String(route.name));
});

// 监听路由变化，更新激活的标签
watch(
  () => route.name,
  (newRouteName) => {
    setActiveTab(String(newRouteName));
  },
);

function setActiveTab(routeName: string) {
  if (routeName === "home") active.value = 0;
  else if (routeName === "about") active.value = 1;
  else if (routeName === "products") active.value = 2;
  else if (routeName === "profile") active.value = 3;
}
</script>

<style lang="less" scoped>
.tabbar-container {
  width: 700px;
  margin: auto;
}
:deep(.van-tabbar) {
  overflow: hidden;
  height: 90px !important;
  background-color: #221a18;
}

.tab-icon {
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
}

.tab-text {
  font-size: 12px;
  margin-top: 2px;
}

:deep(.van-tabbar-item) {
  color: rgba(255, 255, 255, 0.6);
  background-color: #221a18;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

:deep(.van-tabbar-item--active) {
  color: #d3a548; /* 金色高亮 */
  background-color: #221a18;
}

:deep(.van-tabbar--fixed) {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  border-radius: 24px 24px 0 0 !important;
  border-top: 1px solid #635b59;
  box-shadow: none !important;
  height: 90px !important;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 999;
}

:deep(.van-hairline--top-bottom::after),
:deep(.van-hairline-unset--top-bottom::after) {
  display: none !important;
}
</style>
